<template>
    <div>
        <h1>v-model:钱数{{ money }}---{{ pageNo }}---{{ pageSize }}</h1>
        <input type="text" v-model="info" />  <!--v-model之前可以用于收集表单数据，实现数据双向绑定-->
        <hr />
        <!-- <Child :modelValue="money" @update:modelValue="handler"></Child> -->
        <Child v-model="money" v-model:pageNo="pageNo" v-model:pageSize="pageSize"></Child>
        <!-- 
            v-model="money"相当于：
       		第一:给子组件传递props[modelValue] = 10000
       		第二:给子组件绑定自定义事件update:modelValue，这个事件会用注入的数据更新modelValue的值
     	-->
        <!-- 
            v-model:pageNo="pageNo" v-model:pageSize="pageSize"相当于：
            相当于给组件Child1传递两个props分别是pageNo与 pageSize
            以及绑定两个自定义事件update:pageNo与update:pageSize
         -->
    </div>
</template>

<script setup lang="ts">
import Child from "./Child.vue";
import { ref } from "vue";
   
let info = ref("");
let money = ref(10000);  //父组件的数据
let pageNo = ref(1);
let pageSize = ref(3);

//自定义事件(update:modelValue)的回调，这个事件在这里无用，只是演示源码的原理
const handler = (num: number) => {
    //将来接受子组件传递过来的数据
    money.value = num;
};
</script>

<style scoped></style>